<template>
    <div class="main-container column-mng">
        <div class="title">
            <h2>欄目管理</h2>
            <router-link to="/column" class="pull-right">添加頂級欄目>></router-link>
        </div>
        <el-tree class="column-tree"
            node-key="id"
            :data="columnTreeData"
            :props="defaultProps"
            :default-expand-all="true"
            :render-content="renderColumnTreeNode">
        </el-tree>
    </div>
</template>
<script>
import _ from 'lodash';
export default {
    components: {},
    mounted() {
        this.init();
    },
    data() {
        return {
            columnTreeData: [],
            defaultProps: {
                children: 'children',
                label: 'columnName'
            }
        };
    },
    methods: {
        init() {
            this.getColumnTree();
        },
        getColumnTree() {
            return $.request('/column/getColumnTrees.do', {
                method: 'get'
            }).then(res => {
                this.columnTreeData = res.data;
            });
        },
        addColumn() {
            this.$router.push('column');
        },
        addSubColumn(columnId) {
            this.$router.push({
                path: 'column',
                query: {
                    parentId: columnId
                }
            });
        },
        editColumn(columnId, columnName, parentId) {
            this.$router.push({
                path: 'column',
                query: {
                    columnId: columnId,
                    columnName: columnName,
                    parentId: parentId
                }
            });
        },
        deleteColumn(columnId) {
            this.$confirm('此操作將刪除該欄目以及其子欄目，是否確定刪除？', '提示', {
                confirmButtonText: '確定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $.request('/column/deleteColumn.do', {
                    data: {
                        id: columnId
                    }
                }).then((res) => {
                    let me = this;
                    me.removeColumnTreeDataByColumnId(columnId);
                    this.$alert('刪除成功');
                });
            });
        },
        removeColumnTreeDataByColumnId(columnId) {
            function recursion(arr) {
                return arr.some((item, index) => {
                    if (item.id === columnId) {
                        arr.splice(index, 1);
                        return true;
                    }
                    else if (item.children && item.children > 0) {
                        recursion(item.children);
                    }
                })
            }
            recursion(this.columnTreeData);
        },
        /**
         * 向指定栏目发布文章
         * @param {string} columnId 栏目ID
         */
        addArticle(columnId, columnName) {
            this.$router.push({
                path: 'article',
                query: {
                    columnId: columnId,
                    columnName: columnName
                }
            });
        },
        addPic(columnId) {
            this.$router.push({
                path: 'pic',
                query: {
                    columnId: columnId
                }
            });
        },
        /**
         * 渲染栏目树节点，elemeui 只支持使用vue的render函数渲染，或者使用jsx，这里使用jsx引入有些问题就
         * 先使用render的方式处理了
         * @param  {Function} h           [生成节点函数]
         * @param  {Object} options.node  [节点相关]
         * @param  {Object} options.data  [节点数据]
         * @param  {Object} options.store [不清楚]
         */
        renderColumnTreeNode(h, {node, data, store}) {
            var me = this;
            // type 0 列表 1 圖片
            let isPicCollect = +data.columnType === 1;
            let addArticleWord = '發文章';
            let addArticleFunc = me.addArticle;
            if (isPicCollect) {
                addArticleWord = '添加文件';
                addArticleFunc = me.addPic;
            }
            let operateTypes = [
                {textContent: addArticleWord, handle: addArticleFunc},
                {textContent: '編輯', handle: me.editColumn},
                {textContent: '刪除', handle: me.deleteColumn},
                {textContent: '添加子欄目', handle: me.addSubColumn}
            ];
            let operateList = [];
            let l = operateTypes.length;
            for (let i = 0; i < l; i++) {
                let item = operateTypes[i];
                if (+data.parentId === 0) {
                    if (i === 0 || i == 2) {
                        continue;
                    }
                }
                operateList.push(h('el-button', {
                    props: {'type': 'text'},
                    domProps: {textContent: item.textContent},
                    on: {
                        click(e) {
                            e.stopPropagation();
                            e.preventDefault();
                            item.handle(data.id, data.columnName, data.parentId);
                        }
                    }
                }));
            }
            return h('span', [
                h('span', {
                    attrs: {
                        'class': 'default-label'
                    },
                    domProps: {
                        innerHTML: node.label
                    }
                }),
                h('span', {
                    attrs: {
                        'class': 'operate-column'
                    }
                }, operateList)
            ]);
        }
    }
}
</script>
<style lang="less">
.column-mng {
    .column-tree {
        .el-tree-node {
            .el-tree-node__content {
                border-bottom: 1px solid #d1dbe5;
            }
        }
        .operate-column {
            float: right;
            margin-right: 20px;
        }
        .column-type {
            font-size: 12px;
            color: #999;
        }
    }
}
</style>
